(function () {
    let yg = document.querySelector('.yg')
    let yx = document.querySelector('.yx');
    let audio = document.getElementsByTagName('audio')[0];
    let audio1 = document.getElementsByTagName('audio')[1];
    let audio2 = document.getElementsByTagName('audio')[2];
    let audio3 = document.getElementsByTagName('audio')[3];
    let audio4 = document.getElementsByTagName('audio')[4];
    let audio5 = document.getElementsByTagName('audio')[5];
    let btn = document.querySelector('.playaudio');
    let timer = null
    let timer1 = null
    let timer2 = null
    let fishList = [
        {
            name: 'ツナ',
            icon: 'yu1'
        }, {
            name: 'マス',
            icon: 'yu2'
        },
        {
            name: 'サーモン',
            icon: 'yu3'
        },
        {
            name: 'タラ',
            icon: 'yu4'
        },
        {
            name: 'サヨリ',
            icon: 'yu5'
        }
    ]
    let yu = document.querySelector('.upyu')
    let pushyu = document.querySelector('.RIGHT-YU')
    let text = document.querySelector('.bottom3-left')
    let countText = document.querySelector('.text')
    let image = document.querySelector('.image-container');
    let image1 = document.querySelector('.image1');
    let image2 = document.querySelector('.image2');
    let contentBox = document.querySelector('.content_box');
    let techBtn = document.querySelector('.tech-btn-img')
    let teach = document.querySelector('.teach')
    let elImgList = document.querySelectorAll('.el')
    let bacQx = document.querySelectorAll('.bg-qx')
    let bacBox = document.querySelector('.box-img')
    let flag = true
    let syTime = 0  //上鱼时间
    setTimeout(()=>{
        image1.style.animation = 'moveImage 2s linear';
        image2.style.animation = 'moveImageDown 2s linear';
    },1000)
    setTimeout(()=>{
        image.style.display = 'none';
    },2200)
    setTimeout(() => {
        teach.classList.remove('none')
    }, 1100);
    techBtn.addEventListener('click',()=>{
        teach.classList.add('none')
        contentBox.classList.remove("none")
        contentBox.style.animation = 'moveImageOut 2s linear';
    })

    for (let i = 0; i < elImgList.length; i++) {
        elImgList[i].addEventListener("click",(e)=>{
            syTime = Number(e.target.dataset.num)
            for (let j = 0; j < elImgList.length; j++) {
                elImgList[j].style.transform = "none";
            }
            e.target.style.transform = "scaleX(1.3)"
            console.log(syTime);
        })
    }
    let bgList = ["./img/haiyang.png","./new_sc/hwy.jpg","./new_sc/rbh.png"]
    for (let i = 0; i < bacQx.length; i++) {
        bacQx[i].addEventListener("click",(e)=>{
            bacBox.style.background = "url("+ bgList[i] +") no-repeat"
            bacBox.style.backgroundSize = "cover"
        })
    }
    btn.addEventListener('click', () => {
        console.log(btn.src);
        if (audio.paused) {
            audio.play();
            btn.src = "./img/pause.png"
        } else {
            audio.pause();
            btn.src = "./img/play.png"
        }
    })
    yg.addEventListener('mousedown', startDrag);
    yg.addEventListener('touchstart', startDrag);
    var isDragging = false;
    var startPosX = 0;
    var startTranslateX = 0;
    var dragDistanceX = 0;
    var count = 0
    function startDrag(event) {
        event.preventDefault();

        if (event.type === 'mousedown') {
            startPosX = event.clientX;
        } else if (event.type === 'touchstart') {
            startPosX = event.touches[0].clientX;
        }

        startTranslateX = getTranslateX();
        isDragging = true;

        document.addEventListener('mousemove', drag);
        document.addEventListener('touchmove', drag);
        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('touchend', stopDrag);
    }
    function drag(event) {
        if (!isDragging) return;

        var currentPosX = 0;

        if (event.type === 'mousemove') {
            currentPosX = event.clientX;
        } else if (event.type === 'touchmove') {
            currentPosX = event.touches[0].clientX;
        }

        var offsetX = currentPosX - startPosX;
        var translateX = startTranslateX + offsetX;

        setTranslateX(translateX);
    }
    function stopDrag(event) {
        isDragging = false;

        document.removeEventListener('mousemove', drag);
        document.removeEventListener('touchmove', drag);
        document.removeEventListener('mouseup', stopDrag);
        document.removeEventListener('touchend', stopDrag);
    }

    function getTranslateX() {
        var style = window.getComputedStyle(yg);
        var transform = style.transform || style.webkitTransform;
        var matrix = transform.match(/^matrix\((.+)\)$/);

        if (matrix) {
            return parseFloat(matrix[1].split(', ')[4]);
        } else {
            return 0;
        }
    }
    function setTranslateX(translateX) {
        if (translateX > -24) {
            translateX = '-24px';
            yx.style.display = "none"
            yg.style.width = "18%"
            yg.style.background = "url(./img/diaoyugan.png) no-repeat"
            yg.style.transform = 'translate(-50%,-50%)';
            timer1 = null
        } else if (translateX > -325) {
            translateX = '-24px'
            yg.style.width = "18%"
            yx.style.display = "none"
            yg.style.background = "url(./img/diaoyugan.png) no-repeat"
            yg.style.transform = 'translate(-50%,-50%)';
            timer1 = null
        } else if (translateX < - 340) {
            translateX = '-571%'
            yg.style.width = "68%"
            yg.style.background = "url(./img/diaoyugan2.png) no-repeat"
        }
        console.log(translateX);
        dragDistanceX = translateX
        yg.style.transform = 'translate3d(' + translateX + ', -36%, 0)';
        if (translateX == '-24px') {
            yg.style.transform = 'translate(-50%,-50%)';
        }
    }
    document.addEventListener("keyup", (e) => {
        if (dragDistanceX != '-24px' || dragDistanceX != 0) {
            if (e.keyCode == 38) {
                e.preventDefault()
                // yx.style.display = "none"
                if (yx.style.display == 'none') {
                    alert("ラインを出していないため、巻き取ることができません")
                }
                if (timer1) {
                    let ran = Math.floor(Math.random() * fishList.length)
                    audio4.play()
                    clearInterval(timer1)
                    clearTimeout(timer)
                    flag = false
                    timer1 = null
                    timer = null
                    yu.style.display = "block"
                    yu.style.background = "url(./img/" + fishList[ran].icon + ".png) no-repeat"
                    yu.style.backgroundSize = "contain"
                    audio5.play()
                    timer1 = null
                    let height = 40
                    let countYu = 0
                    let top =  77
                    let times = setInterval(() => {
                        if (height > 0) {
                            height--
                            countYu ++
                            yx.style.height = height + "%"
                            yu.style.top = top - countYu + "%"
                        } else {
                            clearInterval(times)
                        }
                    }, 50)
                    timer2 = setInterval(() => {
                        setTimeout(() => {
                            yu.style.transform = 'translate3d(1%, 1%, 0)';
                            setTimeout(() => {
                                yu.style.transform = 'translate3d(0,0, 0)';
                            }, 1000)
                        }, 1000)
                    }, 300)
                    setTimeout(() => {
                        audio2.play()
                        pushyu.style.background = "url(./img/" + fishList[ran].icon + ".png) no-repeat"
                        pushyu.style.backgroundSize = "contain"
                        clearTimeout(timer)
                        clearInterval(timer1)
                        flag = false
                        clearInterval(timer2)
                        timer2 = null
                        yu.style.display = "none"
                        yx.style.display = "none"
                        text.innerHTML = fishList[ran].name
                        count++
                        countText.innerHTML = count
                        pushyu.style.top = '77%'
                    }, 3000)
                }
                console.log("上");
            } else if (e.keyCode == 40) {
                e.preventDefault()
                if(syTime == 0){
                    alert("请选择饵料")
                    return
                }
                flag = true
                audio3.play()
                yx.style.display = "block"
                let height = 0
                let times = setInterval(() => {
                    if (height < 40) {
                        height++
                        yx.style.height = height + "%"
                    } else {
                        clearInterval(times)
                    }
                }, 50)
                startLine()
                console.log("下");
            }
        } else {
            alert("魚竿を海の中に移動してください")
        }
    })
    function startLine(){
        if(flag){
            timer = setTimeout(() => {
                clearTimeout(timer)
                let py = 0
                height = 0
                timer1 = setInterval(() => {
                    if (py <= 5) {
                        py++
                        yx.style.transform = `translate(0, ${py}%)`
                    } else if (py >= 5) {
                        py = 0
                        yx.style.transform = `translate(0, ${py}%)`
                    }
                }, 200)
                setTimeout(()=>{
                    clearTimeout(timer1)
                    timer1 = null
                    clearTimeout(timer)
                    timer = null
                    startLine()
                },5000)
                audio1.play()
            }, syTime * 1000)
        }else{
            clearTimeout(timer1)
            timer1 = null
            clearTimeout(timer)
            timer = null
        }
    }
})()